<template>
	<div :class="classes" :style="styles" @click="back">
		<slot>
			<div :class="innerClasses">
				<i class="ivu-icon ivu-icon-ios-arrow-up"></i>
			</div>
		</slot>
	</div>
</template>
<script>
import { scrollTop } from '@/libs/util';
import { on, off } from '@/libs/tools';
const prefixCls = 'ivu-back-top';

export default {
	name: 'ABackTop',
	props: {
		height: {
			type: Number,
			default: 400
		},
		bottom: {
			type: Number,
			default: 30
		},
		right: {
			type: Number,
			default: 30
		},
		duration: {
			type: Number,
			default: 1000
		},
		container: {
			type: null,
			default: window
		}
	},
	data() {
		return {
			backTop: false
		};
	},
	mounted() {
		// window.addEventListener('scroll', this.handleScroll, false)
		// window.addEventListener('resize', this.handleScroll, false)
		on(this.containerEle, 'scroll', this.handleScroll);
		on(this.containerEle, 'resize', this.handleScroll);
	},
	beforeDestroy() {
		// window.removeEventListener('scroll', this.handleScroll, false)
		// window.removeEventListener('resize', this.handleScroll, false)
		off(this.containerEle, 'scroll', this.handleScroll);
		off(this.containerEle, 'resize', this.handleScroll);
	},
	computed: {
		classes() {
			return [
				`${prefixCls}`,
				{
					[`${prefixCls}-show`]: this.backTop
				}
			];
		},
		styles() {
			return {
				bottom: `${this.bottom}px`,
				right: `${this.right}px`
			};
		},
		innerClasses() {
			return `${prefixCls}-inner`;
		},
		containerEle() {
			return this.container === window ? window : document.querySelector(this.container);
		}
	},
	methods: {
		handleScroll() {
			this.backTop = this.containerEle.scrollTop >= this.height;
		},
		back() {
			let target = typeof this.container === 'string' ? this.containerEle : document.documentElement || document.body;
			const sTop = target.scrollTop;
			scrollTop(this.containerEle, sTop, 0, this.duration);
			this.$emit('on-click');
		}
	}
};
</script>
